<template>
  <div class="app-container">
    <div style="margin-bottom: 10px">
      <el-button size="mini" type="primary" @click="addRecord">
        新增拜访记录
      </el-button>
    </div>

    <el-row :gutter="15">
      <el-form
        ref="elForm"
        :model="formData"
        size="mini"
        label-width="130px"
        :disabled="true"
      >
        <!-- <el-col :span="12">
          <el-form-item label="拜访计划状态" prop="state">
            <el-select
              v-model="formData.state"
              placeholder="请选择拜访计划状态"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in stateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="所属区县" prop="area">
            <el-input
              v-model="formData.area"
              placeholder="请输入所属区县"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="审批状态" prop="approveState">
            <el-select
              v-model="formData.approveState"
              placeholder="请选择审批状态"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in approveStateOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col> -->
        <!-- <el-col :span="12"> </el-col> -->
        <el-col :span="12">
          <el-form-item label="有无拜访计划" prop="visitRecord">
            <el-select
              v-model="formData.visitRecord"
              placeholder="请选择有无拜访计划"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in visitRecordOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户名称" prop="custormer">
            <el-input
              v-model="formData.custormer"
              placeholder="请输入客户名称"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="客户来源" prop="custormerSource">
            <el-select
              v-model="formData.custormerSource"
              placeholder="请选择客户来源"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in custormerSourceOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建类型" prop="createUserType">
            <el-select
              v-model="formData.createUserType"
              placeholder="请选择创建类型"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in createUserTypeOptions"
                :key="index"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行业" prop="trade">
            <el-input
              v-model="formData.trade"
              placeholder="请输入行业"
              clearable
              :style="{ width: '100%' }"
            >
            </el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
          <el-form-item label="转发次数" prop="forwardNum">
            <el-input-number
              v-model="formData.forwardNum"
              placeholder="转发次数"
            ></el-input-number>
          </el-form-item>
        </el-col> -->
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker
              v-model="formData.startTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择开始时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker
              v-model="formData.endTime"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              :style="{ width: '100%' }"
              placeholder="请选择结束时间"
              clearable
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.accountManager">
          <el-form-item label="客户经理" prop="accountManager">
            <el-select
              v-model="formData.accountManager"
              placeholder="请选择客户经理"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in accountManagerOptions"
                :key="index"
                :label="item.userName"
                :value="item.userId"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.areaDirector">
          <el-form-item label="营服主任" prop="areaDirector">
            <el-select
              v-model="formData.areaDirector"
              placeholder="请选择客户经理"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in areaDirectorOptions"
                :key="index"
                :label="item.userName"
                :value="item.userId"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" v-if="formData.tradeBu">
          <el-form-item label="行业BU总监" prop="tradeBu">
            <el-select
              v-model="formData.tradeBu"
              placeholder="请选择行业BU总监"
              clearable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in tradeBuOptions"
                :key="index"
                :label="item.userName"
                :value="item.userId"
                :disabled="item.disabled"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="拜访天数" prop="visitDay">
            <el-input-number
              v-model="formData.visitDay"
              placeholder="拜访天数"
            ></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="拜访次数" prop="visitNum">
            <el-input-number
              v-model="formData.visitNum"
              placeholder="拜访次数"
            ></el-input-number>
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-form-item label="拜访内容" prop="visitInfo">
            <el-input
              v-model="formData.visitInfo"
              type="textarea"
              placeholder="请输入拜访内容"
              :autosize="{ minRows: 4, maxRows: 4 }"
              :style="{ width: '100%' }"
            ></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <AddRecordDialog ref="addRecordDialog" />
  </div>
</template>
<script>
import { listUserRoleId } from "@/api/system/user";
import { getVisitDetail } from "@/api/visit/visit";
import AddRecordDialog from "./addRecordDialog.vue";

export default {
  components: { AddRecordDialog },
  props: [],

  data() {
    return {
      formData: {
        // state: undefined,
        area: undefined,
        // approveState: undefined,
        // approveUser: undefined,
        custormer: undefined,
        custormerSource: undefined,
        createUserType: undefined,
        // forwardNum: undefined,
        startTime: null,
        endTime: null,
        accountManager: undefined,
        tradeBu: undefined,
        visitDay: undefined,
        visitNum: undefined,
        visitRecord: undefined,
        trade: undefined,
        visitInfo: undefined,
      },
      stateOptions: [
        {
          label: "新建",
          value: 1,
        },
        {
          label: "计划执行",
          value: 2,
        },
        {
          label: "结束",
          value: 3,
        },
      ],
      approveStateOptions: [
        {
          label: "未审批",
          value: 0,
        },
        {
          label: "审批通过",
          value: 1,
        },
        {
          label: "审批不通过",
          value: 2,
        },
      ],
      areaDirectorOptions: [],
      custormerSourceOptions: [
        {
          label: "清单客户",
          value: 1,
        },
        {
          label: "非清单制客户",
          value: 2,
        },
      ],
      createUserTypeOptions: [
        {
          label: "行业BU总监",
          value: 1,
        },
        {
          label: "政企营服主任",
          value: 2,
        },
        {
          label: "客户经理",
          value: 3,
        },
      ],
      accountManagerOptions: [],
      tradeBuOptions: [],
      visitRecordOptions: [
        {
          label: "无",
          value: 0,
        },
        {
          label: "有",
          value: 1,
        },
      ],
    };
  },
  computed: {
    id() {
      return this.$route.query.id;
    },
  },
  watch: {},
  created() {},
  mounted() {
    this.loadUser();
  },
  methods: {
    loadData() {
      getVisitDetail(this.id).then((res) => {
        this.formData = res.data;
      });
    },

    loadUser() {
      // roleId: 101 客户经理Id
      const p1 = listUserRoleId({
        pageNum: 1,
        pageSize: 9999,
        roleId: 101,
      }).then((res) => {
        this.accountManagerOptions = res.rows;
      });

      // 行业bu
      const p2 = listUserRoleId({
        pageNum: 1,
        pageSize: 9999,
        roleId: 100,
      }).then((res) => {
        this.tradeBuOptions = res.rows;
      });

      // 营服主任
      const p3 = listUserRoleId({
        pageNum: 1,
        pageSize: 9999,
        roleId: 102,
      }).then((res) => {
        this.areaDirectorOptions = res.rows;
      });

      Promise.all([p1, p2, p3]).then(() => {
        this.loadData();
      });
    },

    addRecord() {
      this.$refs.addRecordDialog.showDialog(this.id);
    },
  },
};
</script>
<style></style>
